<template>
    <div>
        <div class="form-section">
            <div class="form-item  form-item-style1">
                <div class="label-title">
                    <label>上传日期</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>{{param.data.UploadDate}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1 pr10"
                 v-if="userInfo.departsir == '1'">
                <div class="label-title">
                    <label>分包</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="right-select"
                     @click="FBPropShow = true">
                    <p>
                        {{param.data.DutyFB?param.data.DutyFB:'请选择'}}
                    </p>
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
            </div>
            <div class="form-item form-item-style1 pr10"
                 v-if="userInfo.departsir == '1'">
                <div class="label-title">
                    <label>班组</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="right-select"
                     @click="changeTeamPropShow = true">
                    <p>
                        {{param.data.DutyGroup?param.data.DutyGroup:'请选择'}}
                    </p>
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="userInfo.departsir != '1'">
                <div class="label-title">
                    <label>项目</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="right-select"
                     @click="companyPropShow = true">
                    <p>
                        {{param.data.Project?param.data.Project:"请选择"}}
                    </p>
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>信息评价</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                </div>
                <div>
                    <textarea v-model="param.data.Appraise"></textarea>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>照片</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <span>当前共{{uploadLength}}张照片</span>
                </div>
                <div class="upload-wrap">
                    <upload @setFormData="setFormData"></upload>
                </div>
            </div>
            <div class="form-item  form-item-style1">
                <div class="label-title">
                    <label>上传人</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>{{userInfo.username}}</p>
                </div>
            </div>
        </div>
        <div class="btns">
            <!-- <button>保存</button> -->
            <button class="green width200"
                    @click="submit">提交</button>
        </div>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompany"
                     :selectSlef="false"></companyProp>
        <!-- 分包 -->
        <FBProp :selectFBFn="selectFBFn"
                :FBPropShow="FBPropShow"></FBProp>
        <!-- 班组 -->
        <changeTeamProp :changeTeamPropShow="changeTeamPropShow"
                        :selectTeamFn="selectTeamFn"
                        :deptId="userInfo.deptid"></changeTeamProp>
        <myMenu></myMenu>
    </div>
</template>
<script>
import { TransferDom, Popup } from 'vux'
import formatDate from '@/utils/formatDate'
import myMenu from '@/commonComponents/menu'
import upload from '@/commonComponents/upload/index'
import companyProp from '@/commonComponents/companyProp'
import changeTeamProp from '@/commonComponents/changeTeamProp' //  班组
import FBProp from '@/commonComponents/FBProp'
import { setTimeout } from 'timers'
export default {
    name: 'addSafeExposure',
    directives: {
        TransferDom
    },
    data () {
        return {
            FBPropShow: false, // 分包选择分包
            changeTeamPropShow: false, // 选择班组
            userInfo: {},
            companyPropShow: false, // 选择项目
            param: {
                business: 'ReportExposal',
                Method: 'new',
                data: {
                    ProjectID: '',
                    Project: '',
                    Type: this.$route.query.type,
                    UploadDate: formatDate(),
                    DutyFB: '', // 分包
                    DutyFBID: '', // 分包ID
                    DutyGroup: '', // 班组
                    DutyGroupID: '', // 班组ID
                    Appraise: '', // 信息评价
                    hasPraise: false, // 是否点赞
                    UploadPerson: '', // 上传人
                    UploadPersonID: '' // 上传人ID
                },
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': '',
                'userId': ''
            },
            uploadLength: 0,
            uploadImgFormData: null
        }
    },
    components: {
        Popup,
        upload,
        myMenu,
        companyProp,
        changeTeamProp,
        FBProp
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.param.data.UploadPerson = this.userInfo.username
        this.param.data.UploadPersonID = this.userInfo.userid
        this.param.userId = this.userInfo.userid
        if (this.$route.query.type == 1) {
            document.title = '新增红榜'
        } else {
            document.title = '新增黑榜'
        }
    },
    methods: {
        setFormData (formData, uploadLength) {
            this.uploadImgFormData = formData
            this.uploadLength = uploadLength
        },
        submit () {
            if (this.userInfo.departsir == '1') {
                if (!this.param.data.DutyFB) {
                    this.$vux.toast.text('请选择分包')
                    return false
                } else if (!this.param.data.DutyGroup) {
                    this.$vux.toast.text('请选择班组')
                    return false
                }
            } else {
                if (!this.param.data.Project) {
                    this.$vux.toast.text('请选择项目')
                    return false
                }
            }
            if (!this.param.data.Appraise) {
                this.$vux.toast.text('请输入信息评价')
                return false
            } else if (!this.uploadLength) {
                this.$vux.toast.text('请上传照片')
                return false
            }
            this.$axiosAjax.getConfigJson(
                this.param,
                this.uploadImgFormData
            ).then((res) => {
                if (res.data.code === 0) {
                    this.$vux.toast.text('新增成功')
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 500)
                }
            })
        },
        selectCompany (item) {
            this.companyPropShow = false
            this.param.data.Project = item.Name
            this.param.data.ProjectID = item.Id
        },
        selectFBFn (item) { // 选择分包
            this.FBPropShow = false
            this.param.data.DutyFB = item.deptName
            this.param.data.DutyFBID = item.deptId
        },
        selectTeamFn (item) { // 选择班组
            this.changeTeamPropShow = false
            this.param.data.DutyGroup = item.deptName
            this.param.data.DutyGroupID = item.deptId
        }
    }
}
</script>
<style scoped>
.right-select {
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
    color: #999;
    height: 20px;
    width: 180px;
    position: relative;
    line-height: 20px;
}
.right-select p {
    width: 130px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.icon-jinru:before {
    color: #c8c8cd;
}
.pr10 {
    padding-right: 10px !important;
}
</style>
